<script setup lang="ts">
import {Delete, WarnTriangleFilled, InfoFilled, Plus, Search} from '@element-plus/icons-vue'
import api from '@/api/index'
import {onMounted, reactive, ref} from 'vue'
import {useRouter} from 'vue-router'
import type {SampleInfo} from "@/types";
import {ElMessage} from "element-plus";
import {Encrypt, Decrypt, generateKey} from "@/utils/crypto"

const router = useRouter()


let collectionName = ref('collect_20211201_v11')
let namespace = ref('namespace_1')


const getSampleList = () => {
  sample.length = 0
  api.getSampleList(namespace.value, collectionName.value, 0, 10)
      .then((res) => {
            Object.assign(sample, res.data.data)
            total.value = sample.length
            getPageInfo()
          }
      ).catch(error => {
        ElMessage('获取人脸样本列表失败')
      }
  )
}


const sampleDetail = (row: SampleInfo) => {
  router.push({
    name: 'sample-detail',
    params: {namespace: row.namespace, collectionName: row.collectionName, sampleId: row.sampleId}
  })
}

//创建样本
const CreateSample = () => {
  router.push({name: 'sample-create', params: {namespace: 'namespace_1', collectionName: 'collect_20211201_v11'}})
}

// 删除样本
const deleteSample = (row: SampleInfo) => {
  api.deleteSample(row.namespace, row.collectionName, row.sampleId)
      .then((res) => {
        if (res.data.code === 0) {
          getSampleList()
          ElMessage.success('删除样本成功')
        }
      }).catch(error => {
    ElMessage.error('删除样本失败')
  })

}

//人脸数据详情
const faceDataDetail = (row: SampleInfo) => {
  //对row进行des加密
  let facesData = Encrypt(JSON.stringify(row.faces))
  router.push({
    name: 'sample-face-data-detail',
    params: {
      namespace: row.namespace,
      collectionName: row.collectionName,
      sampleId: row.sampleId,
      data: facesData
    }
  })
}

const createFaceData = (row:SampleInfo) => {
  router.push({
    name: "face-data-create",
    params: {
      namespace: row.namespace,
      collectionName: row.collectionName,
      sampleId: row.sampleId,
    }
  })
}

onMounted(() => {
  getSampleList()
})

let sample = reactive<Array<SampleInfo>>([]) //这里是从后端获取的所有数据
let total = ref(0)  //总数据条数
let currentpage = ref(1) //当前所在页默认是第一页
let pagesize = ref(5)  //每页显示多少行数据 默认设置为10
let pageTicket = reactive<Array<SampleInfo>>([]) //分页后的当前页数据

//分页
const getPageInfo = () => {  // 获取当前页的数据信息
  //清空pageTicket中的数据
  pageTicket.length = 0
  // 获取当前页的数据
  for (let i = (currentpage.value - 1) * pagesize.value; i < total.value; i++) {
    //把遍历的数据添加到pageTicket里面
    pageTicket.push(sample[i]);
    //判断是否达到一页的要求
    if (pageTicket.length === pagesize.value) break;
  }
}
const handleSizeChange = (size: number) => {  //分页时修改每页的行数,这里会自动传入一个size
  //修改当前每页的数据行数
  pagesize.value = size;
  //数据重新分页
  getPageInfo();
}
const handleCurrentChange = (pageNumber: number) => { //调整当前的页码
                                                      //修改当前的页码
  currentpage.value = pageNumber;
  //数据重新分页
  getPageInfo()
}

</script>

<template>

  <el-button type="primary" :icon="Plus" @click="CreateSample">创建样本</el-button>
  <br><br>
  <div>
    命名空间：
    <el-input v-model="namespace" placeholder="请输入命名空间" style="width: 200px"/>&nbsp;&nbsp;
    集合名称：
    <el-input v-model="collectionName" placeholder="请输入集合名称" style="width: 200px"/>&nbsp;&nbsp;
    <el-button type="primary" :icon="Search" @click="getSampleList">获取</el-button>
    <br><br>
  </div>

  <el-table border :data="pageTicket" table-layout="auto">
    <el-table-column type="index" label="NO" align="center"/>
    <el-table-column prop="namespace" label="命名空间" align="center"/>
    <el-table-column prop="collectionName" label="集合名称" align="center"/>
    <el-table-column prop="sampleId" label="样本ID" align="center"/>
    <el-table-column prop="sampleData" label="样本扩展字段" align="center">
      <template #default="scope">
        <el-table :data="scope.row.sampleData" border table-layout="auto">
          <el-table-column prop="key" label="字段名称" align="center"/>
          <el-table-column prop="value" label="字段值" align="center"/>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column prop="faces" label="人脸数据" align="center">
      <template #default="scope">
        <el-link type="primary" @click="faceDataDetail(scope.row)">详情</el-link>&nbsp;&nbsp;&nbsp;&nbsp;
        <el-link type="primary" @click="createFaceData(scope.row)">添加</el-link>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-tooltip content="样本详情" placement="top">
          <el-button type="primary" :icon="InfoFilled" @click="sampleDetail(scope.row)"/>
        </el-tooltip>
        <el-tooltip content="删除样本" placement="top">
          <el-popconfirm
              width="220"
              confirm-button-text="确认"
              cancel-button-text="取消"
              :icon="WarnTriangleFilled"
              title="您确定要删除此样本吗？"
              @confirm="deleteSample(scope.row)"
          >
            <template #reference>
              <el-button type="danger" :icon="Delete"/>
            </template>
          </el-popconfirm>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
  <el-row style="text-align: right">
    <el-col>
      <el-pagination
          style="position: absolute; right:10px;margin: 10px"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentpage"
          :page-sizes="[5, 10,50,100]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-col>
  </el-row>
</template>

<style scoped>


</style>